<template>
    <div>
        <mt-header fixed v-show="showTool" v-bind:class="{'chapter-header': true,'chapter-header-night': !sun}" :title="title">
            <mt-button icon="more" slot="right" @click="fshowCatalog()"></mt-button>
        </mt-header>
        <div class="catalog-panel" v-show="showCatalog"  v-bind:style="{ offsetTop: top}">
            <div class="catalog-header">
                {{title}}
            </div>
            <div class="catalog-tool">
                <div class="catalog-tool-font-small" @click="fontsmall">A</div>
                <div class="catalog-tool-font-big" @click="fontbig">A</div>
                <div style="clear:both"></div>
            </div>
            <ul class="catalog">
                <li class="catalog-li" v-bind:class="{'catalog-li-active': index == $route.params.novel_id}" v-for="(item, index) in chapters" @click="to(index)">{{item.title}}</li>
            </ul>
        </div>
        <v-touch v-on:swipeleft="onSwipeLeft" v-on:swiperight="onSwipeRight" v-on:tap="onTap">
          <div v-bind:class="{'fix-header-padding':showTool,'chapter-centent': true, 'chapter-centent-night': !sun}" v-bind:style="{fontSize: fontSize + 'px', lineHeight: lineHeight + 'px'}" v-html="chapter.data"></div>
        </v-touch>
        <mt-tabbar v-show="showTool" id="chapter-tool" :fixed="true">
            <mt-tab-item id="chapter-style">
                <img v-on:click="changesun" v-show="!sun" slot="icon" src="">
                <span v-show="!sun">正常</span>
                <img v-on:click="changesun" v-show="sun" slot="icon" src="">
                <span v-show="sun">夜间</span>
            </mt-tab-item>
            <mt-tab-item id="chapter-down">
                <img v-on:click="chapterDown" slot="icon" src="">
                <span>缓存</span>
            </mt-tab-item>
        </mt-tabbar>
    </div>
</template>

<script type="text/babel">
    import Vue from 'vue'
    import { Indicator } from 'mint-ui'
    import { Toast } from 'mint-ui'
    import { MessageBox } from 'mint-ui';

    import VueTouch from 'vue-touch'
    Vue.use(VueTouch)

    VueTouch.config.swipe = {
        direction: 'horizontal'
    };
    export default{
        data(){
            return{
                chapter:{
                    data: "",
                },
                chapters:[],
                title: "",
                novel_id: 0,
                index: 0,
                back_url: "",
                sun: true,
                showTool: false,
                lineHeight: 24,
                fontSize: 18,
                showCatalog: false,
                top: 100,
            }
        },
        created () {
          var _this = this
            document.onkeydown = function(e) {
              if(e && e.keyCode == 39 ){
                _this.onSwipeLeft()
              }
              if(e && e.keyCode == 37 ){
                _this.onSwipeRight()
              }
            }
            this.fetch()
        },
        watch: {
            '$route': 'fetch'
        },
        beforeRouteLeave (to, from, next) {
            var _this = this
            if (_this.novel_id <= 0) {
                next(true)
            }
            var novel_mark = new Array()
            if (localStorage["novel_mark"] != undefined) {
                novel_mark = JSON.parse(localStorage["novel_mark"])
            }
            var index = novel_mark.indexOf(_this.novel_id)
            if (index > -1) {
                novel_mark.splice(index, 1);
                var new_mark = new Array()
                new_mark.push(_this.novel_id)
                localStorage["novel_mark"] = JSON.stringify(new_mark.concat(novel_mark))
                next(true)
            } else {
                MessageBox.confirm('是否加入书签?').then(action => {
                    var new_mark = new Array()
                    new_mark.push(_this.novel_id)
                    localStorage["novel_mark"] = JSON.stringify(new_mark.concat(novel_mark))
                    localStorage["novel_mark_id_" + _this.novel_id] = _this.index
                    next(true)
                }, cancel => {
                    next(true)
                })
            }
        },
        methods: {
            onSwipeLeft: function(event) {
                var _this = this
                if ( _this.index >= _this.chapters.length ) {
                    Toast('没有下一章了')
                    return
                }
                var index = _this.index + 1
                _this.$router.replace("/chapter/" + _this.novel_id + "/" + index)
            },
            onSwipeRight: function(event) {
                var _this = this
                if ( _this.index <= 0 ) {
                    Toast('没有上一章了')
                    return
                }
                var index = _this.index - 1
                _this.$router.replace("/chapter/" + _this.novel_id + "/" + index)
            },
            fshowCatalog() {
                this.showCatalog = true
            },
            fhideCatalog() {
                this.showCatalog = false
            },
            onTap() {
                if (this.showCatalog) {
                    this.showCatalog = false
                    return
                }
                if (this.showTool) {
                    this.showTool = false
                } else {
                    this.showTool = true
                }
            },
            changesun() {
                if (this.sun) {
                    this.sun = false
                } else {
                    this.sun = true
                }
            },
            fontbig() {
                this.fontSize = this.fontSize + 1
                this.lineHeight = this.lineHeight + 1
            },
            fontsmall() {
                this.fontSize = this.fontSize - 1
                this.fontSize = this.fontSize - 1
                this.lineHeight = this.lineHeight - 1
            },
            chapterDown() {
                Toast('编写中o(^▽^)o');
            },
            to(id) {
                var _this = this
                this.$router.replace("/chapter/" + _this.novel_id + "/" + id)
                this.showCatalog = false
            },
            catalog(callback) {
                var _this = this
                if (_this.chapters.length != 0) {
                    callback()
                    return
                }
                _this.$http.get("https://novel.nightc.com/v1/novel/" + _this.novel_id + "/chapters", {
                    timeout:5000,
                }).then(response => {
                    var body = response.body
                    if (body.code != undefined && body.code == 0) {
                        _this.chapters = body.data
                        callback()
                    } else {
                        console.log(body)
                    }
                }, response => {
                    _this.catalog(callback)
                })
            },
            load_chapter: function() {
                var _this = this
                if (_this.index >= _this.chapters.length) {
                    _this.index = _this.chapters.length - 1
                }
                _this.$http.get("https://novel.nightc.com/v1/chapter/" + encodeURIComponent(_this.chapters[_this.index].url), {
                    timeout:3000,
                }).then(response => {
                    var body = response.body
                    if (body.code != undefined && body.code == 0) {
                        document.body.scrollTop = 0
                        document.documentElement.scrollTop = 0
                        _this.title = _this.chapters[_this.index].title
                        _this.chapter.data = body.data
                        _this.back_url = "/novel/" + _this.novel_id
                        if (localStorage["novel_mark_id_" + _this.novel_id] != undefined) {
                            localStorage["novel_mark_id_" + _this.novel_id] = _this.index
                        }
                    } else {
                        console.log(body)
                    }
                    Indicator.close()
                }, response => {
                    Toast('加载失败')
                    Indicator.close()
                })

            },
            fetch: function() {
                Indicator.open({
                    text: '拼命加载中n(*≧▽≦*)n...',
                    spinnerType: 'fading-circle'
                });
                var _this = this
                _this.novel_id = _this.$route.params.id
                if (_this.novel_id <= 0) {
                    console.log("error novel_id")
                    // todo 跳转到列表页
                }
                if(_this.$route.params.novel_id != undefined) {
                    _this.index = parseInt(_this.$route.params.novel_id)
                }
                _this.catalog(_this.load_chapter)

            }
        }
    }
</script>

<style lang="css" rel="stylesheet/css">
    .catalog-bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
    }
    .catalog-panel {
        position: fixed;
        top: 0;
        left: 0;
        background-color: #FAFAFA;
        width: 80%;
        height: 100%;
        overflow-y: auto;
        z-index: 3;
    }
    .catalog-li-active {
        color: cornflowerblue;
    }
    .catalog-li {
        display: block;
        text-align: center;
        width: 100%;
        height: 25px;
        line-height: 25px;
        font-size: 14px;
    }
    .catalog {
        margin-top:10px;
    }
    .catalog-li a {
        display: block;
        width: 100%;
        height: 100%;
    }
    .catalog-header {
        height:40px;
        line-height: 40px;
        text-align: center;
        width: 100%;
        font-weight: 400;
        -webkit-box-flex: 1;
        flex: 1;
    }
    .catalog-tool {
        margin-top: 15px;
    }
    .catalog-tool-font-big, .catalog-tool-font-small {
        height: 38px;
        line-height: 38px;
        width: 49%;
        float: left;
        -webkit-box-flex: 1;
        flex: 1;
        text-align: center;
        border:1px solid #ccc;
    }
    .catalog-tool-font-big:hover, .catalog-tool-font-small:hover {
        background-color: #F7F7F7;
    }
    .catalog-tool-font-big {
        font-size: 25px;
        font-weight: 500;
    }
    .catalog-tool-font-small {
        font-size: 18px;
        font-weight: 400;
    }
    .chapter-centent {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        padding: 5px 10px;
        width: 100%;
        overflow-x: hidden;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .chapter-header {
        background-color: #FFF;
        color: black;
    }
    #chapter-tool {
        background-image: -webkit-linear-gradient(top, #3C3F41, #3C3F41 50%, transparent 50%);
        background-image: linear-gradient(180deg, #3C3F41, #3C3F41 50%, transparent 50%);;
        background-color: #3C3F41;
    }
    #chapter-tool span{
        color:#ccc;
    }
    .chapter-centent-night, .chapter-header-night {
        background-color: #333333;
        color: #FFEEBC;
    }
    .fix-header-padding {
        padding-top:46px;
    }
</style>
